window.addEventListener('load',function(){
	// 定义食物类;
	class Food{
		constructor(id) {
		    // 获取食物;
			this.main = document.querySelector(id)
			// 获取食物元素
			this.food = this.main.querySelector('.food')
			
		}
		// 获取食物离屏幕的左边距离;
		get X(){
			 return this.food.offsetLeft;
		}
		// 获取食物离屏幕的上边距离;
		get Y(){
			return this.food.offsetTop;
		}
		// 食物位置发生改变方法 chang()
		chang(){
		 /* 
			蛇身只有10px 每次增加也只能加 10；
				定义一个随机数 0~310 且都是10的倍数 之间的数 
		 */
		// 食物最小位置0 最大310
			let left = Math.round(Math.random()*31) * 10;
			let top = Math.round(Math.random()*31) * 10;
			this.food.style.left = `${left}px`;
			this.food.style.top = `${top}px`;
		}
		// console.log(Y());
		
	}
	// 测试代码；
	var foods = new Food('.content');
	console.log(foods.X, foods.Y)
	foods.chang();
	console.log(foods.X, foods.Y)
		/* let score = 0;
		let grade = 1; */
		
	// 记分牌类
	class ScorePanel{
		// maxGrade: 最大等级; Upscore: 每几分升一级;
		constructor(maxGrade,Upscore) {
			// 定义分数;
			this.S = 0;
			// 定义等级;
			this.G = 1;
			// 定义等级最大为10;
			this.maxGrade = maxGrade;
			// 定义每几分升一级;
			this.Upscore = Upscore;
			// 获取记分牌;
		    this.score = document.querySelector('.score');
			// 获取等级牌
			this.grade = document.querySelector('.grade')
			
		}
		// 分数方法
		Score(){
		// 当该方法被调用时 将分数给记分牌;
			this.score.innerHTML = ++this.S + '';
		// 当分数取余10 等于 0 时 调用 等级牌;
			if(this.S % this.Upscore === 0){
				this.Grade();
			}
		}
		// 等级方法
		Grade(){
			// 等级最高为10级;
			// 当 等级不大于10时 才会升级;
			if(this.G < this.maxGrade){
				this.grade.innerHTML = ++this.G + '';
			}
		}
	}
	const test = new ScorePanel(10,10) //最大等级为 10, 每 10 分一级;
	for(let i = 0; i < 200; i++){
		test.Score()
	}
})
